<!DOCTYPE html>
<head>
    <title>Vue.js 9.26 Documentation</title>
    <meta charset="UTF-8">
    <script src="/Users/shihaoran/Desktop/vue.global.js"></script>
</head>

<body>
    <!-- <div id="app"> 
        <p>count is: {{ count }} </p>
        <p>message is: {{ message }} </p>
    </div> -->

    <!-- vue的事件监听 -->
    <div id="clickApp">
        <!-- <button v-on:click="onclick">Click me</button> -->
        <button @click="onclick">Click me</button>
    </div>

    <!-- 自定义组件 -->
    <div id="componentApp">
        <my-component></my-component>
    </div>

    <!-- 自定义组件的 props -->
    <div id="propsApp">
        <props-component content="This is a props component"></props-component>
    </div>

    <!-- 组件之间的事件监听 -->
    <div id='EmitApp'></div>

    <div id="EmitApp_cn">
        <button-counter @increment="incrementTotal"></button-counter>
        <p>Total clicks: {{ total }}</p>
    </div>

    <script>
        const VueApp = {
            data() {
                return { 
                    message: 'Hello Vue!!!',
                    count: 0,
                }
            }
        };
        Vue.createApp(VueApp).mount('#app');

        const ClickApp = {
            methods: {
                onclick() {
                    alert('You clicked me!');
                }
            }
        };
        Vue.createApp(ClickApp).mount('#clickApp');

        const ComponentApp = Vue.createApp({});
        ComponentApp.component('myComponent', {
                template: '<p>This is a custom component</p>'
            }
        );
        ComponentApp.mount('#componentApp');

        const propsApp = Vue.createApp({});
        propsApp.component('propsComponent', 
            {
                props: ['content'],
                template: '<h1>{{ content }}</h1>'
            }
        );
        propsApp.mount('#propsApp');

        // 组件之间的事件监听
        const EmitApp = {
            data() {
                return { total : 0 };
            },
            methods: {
                incrementTotal() {
                    ++this.total;
                }
            },
            template: `
                <button_container @incrementCount="incrementTotal"></button_container>
                <p>Total Clicks: {{ total }}</p>
            `
        };

        EmitApp.component('button_container', {
            template: '<button @click="incrementCount">you have clicked me {{ count }} times</button>',
            data() {
                return { count: 0 };
            },
            methods: {
                incrementCount() {
                    ++this.count;
                    this.$emit('incrementCount');
                }
            }
        });
        vue.createApp(EmitApp).mount('#EmitApp');

        const app = createApp({
        data() {
        return { total: 0 };
        },
        methods: {
            incrementTotal() {
                this.total++;
            }
        }
    });

    app.component('button-counter', {
        template: '<button @click="increment">You clicked me {{ count }} times.</button>',
        data() {
        return {
            count: 0
        };
        },
        methods: {
        increment() {
            this.count++;
            this.$emit('increment');
        }
        }
    });

    app.mount('#app');
        
    </script>
</body>